<template>
  <div class="register">
    <div class="prompt" v-show="isShowPrompt">
      <div>{{promptMessage.username}}</div>
      <div>{{promptMessage.password}}</div>
    </div>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span
          class="input-group-text"
          id="basic-addon1"
        >📱&nbsp;</span>
      </div>
      <input
        class="form-control"
        placeholder="用户名"
        type="text"
        @input="debounceNameInput"
        v-model="registerInfo.username"
      />
    </div>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span
          class="input-group-text"
          id="basic-addon1"
        >🔒</span>
      </div>
      <input
        class="form-control"
        placeholder="密 码"
        type="text"
        v-model="registerInfo.password"
      />
    </div>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span
          class="input-group-text"
          id="basic-addon1"
        >🔒</span>
      </div>
      <input
        class="form-control"
        placeholder="确认密码"
        type="text"
        @input="debouncePasswordInput"
      />
    </div>
    <button type="button" class="btn btn-info btn-lg btn-block"
    @click="onRegister"
    >注册</button>
  </div>
</template>

<script>
import {
  ref, reactive, getCurrentInstance
} from 'vue'
import debounce from '../../../utils/debounce'
import { isExist, register } from '../../../network/user'

export default {
  name:"Register",
  components:{},
  setup() {
    const { ctx } = getCurrentInstance()
    const isShowPrompt = ref(false) //是否显示提示框
    const password = ref(null) //记录第一遍输入的密码
    const registerInfo = reactive({
      username: '',
      password: '',
    }) //用户注册信息
    const promptMessage = reactive({
      username: '用户名不合',
      password: '密码不合'
    }) //提示框文本
    const canRegister = reactive({
      username: false,
      password: false
    }) //是否可以注册
    
    //判断用户名是否可用
    const nameInput = async event => {
      const value = event.target.value
      if(!value) {
        return isShowPrompt.value = false
      }
      const result = await isExist(value)
      isShowPrompt.value = true
      if(result.status === 200) {
        canRegister.username = true
        promptMessage.username = result.data
      }else {
        canRegister.username = false
        promptMessage.username = result.message
      }
    }
    const debounceNameInput = debounce(nameInput, 500)

    // 比较密码是否一致
    const passwordInput = event => {
      const value = event.target.value
      if(value === registerInfo.password) {
        canRegister.password = true
        return promptMessage.password = '密码一致'
      }
      canRegister.password = false
      promptMessage.password = '密码不一致'
    }
    const debouncePasswordInput = debounce(passwordInput, 500)

    // 注册
    const onRegister = async () => {
      if(!canRegister.username) {
        return alert(promptMessage.username)      
      }
      if(!canRegister.password) {
        return alert(promptMessage.password)
      }
      const result = await register(registerInfo)
      //登录失败
      if(result.status !== 200) {
        return alert(result.message)
      }
      //将用户信息存储到store中
      ctx.$store.commit('setUserInfo', result.data)
      ctx.$router.push('/')
    }

    return {
      isShowPrompt,
      registerInfo,
      promptMessage,
      nameInput,
      debounceNameInput,
      debouncePasswordInput,
      onRegister
    }
  }
}
</script>

<style scoped lang='stylus' >
.register
  .prompt
    margin 15px 0
</style>